<template>
	<view>
		<xl-address
      :list="list"
			listApi=""
			addressApi="getAddress"
			:propNames="{ isDefault: 'default' }"
      manage
      popup
      height="600rpx"
			@load="load"
      @changeDefault="changeDefault"
      @edit="editAddress"
      @delete="deleteAddress"
      @submit="submit"
      @click="clickAddress"
		/>
	</view>
</template>
	
<script setup>
  import { ref } from 'vue'
  const list = ref([
    {
      id: 1,
      name: '张三',
      tel: '13388888888',
      province: '北京',
      city: '北京',
      district: '海淀区',
      address: '颐和园路5号',
      default: true
    },{
      id: 2,
      name: '李四',
      tel: '13888888888',
      province: '福建',
      city: '福州',
      district: '闽侯县',
      address: '高新区软件园',
      default: false
    }
  ])

	// 若不用API请求，则可使用load事件加载，根据option参数请求数据后，使用push添加数据
	function load(params, push){
		uni.$xl.apis.test({
      params: params
    }).then(()=>{
			push([{
        id: 1,
        name: '张三',
        tel: '13388888888',
        province: '北京',
        city: '北京',
        district: '海淀区',
        address: '颐和园路5号',
        default: true
      }])
		})
	}

  /**
   * 切换默认地址触发
   * @param id
   * @param isDefault
   */
  function changeDefault(id, isDefault) {

  }

  /**
   * 点击编辑地址触发
   * @param address 地址数据
   */
  function editAddress(address) {

  }
  /**
   * 点击删除地址触发
   * @param addressId 地址ID
   * @param done 删除完成回调
   */
  function deleteAddress(addressId, done) {

  }

  /**
   * 有开启弹窗表单，表单提交触发
   * @param address 地址表单数据
   * @param done  提交成功回调
   */
  function submit(address, done) {
    if(address.id) {
      // 有ID 为修改
      uni.$xl.api.test({
        params: address,
      }).then(() => {
        done()
      })
    } else {
      // 新增
      uni.$xl.api.test({
        params: address,
      }).then(() => {
        done()
      })
    }
  }

  /**
   * 点击地址触发
   * @param address 地址数据
   */
  function clickAddress(address) {

  }
</script>

<style lang="scss" scoped>
	
</style>